<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con{
            font-size: 16px;
            display: none;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <input type="text" class="con" >
    <input type="text" id="jd" placeholder="请输入文字">
    <script>
        //思路：jd input输入框中有文字输入时，现在con输入框。没有文字输入的时候则将con框隐藏
        var con = document.querySelector(".con")
        var ipt = document.getElementById('jd')

        //注意点：keyup事件为点击键盘弹起，在按键弹起之前文字已经输入到文本框。
        //但是keydown与keypress事件是在键盘被按下时会触发，此时输入的文字并没有被输入到文本框中。
        //且keypress对命令指令按键没有效果
        ipt.addEventListener("keyup",function(){
            //判断如果当前输入框中有值则显示con否则不显示
            if(this.value === ''){
                con.style.display = "none"
            } else{
                con.value = this.value
                con.style.display = "block"
            }
        })
        //ipt输入框在失去焦点的时候，将con隐藏
        ipt.addEventListener("blur",function(){
            con.style.display = "none"
        })
        //ipt输入框在获得焦点的时候，将con显示
        ipt.addEventListener("focus",function(){
            if(this.value !== ''){
                con.style.display = "block"
            }
        })
    </script>
</body>
</html>